<template>
    <a-spin tip="上传文件..." :spinning="loading" class="clearfix">
        <a-upload
            list-type="picture-card"
            :file-list="fileList"
            accept="image/*,.pdf,video/*"
            :multiple="max==1?false:true"
            :disabled="disabled"
            :customRequest="downloadFilesCustomRequest"
            @preview="handlePreview"
            :remove="removeFile"
        >
            <div v-if="fileList.length < max && !disabled">
                <a-icon :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text">选择图片</div>
            </div>
        </a-upload>
        <p class="tip" v-if="!disabled && max>1 && max<=9"><slot>最多上传 {{max}} 张</slot></p>
        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <div v-if="previewImage.indexOf('.pdf')>=0">
                <pdf
                    ref="pdf"
                    :src="previewImage"
                    v-for="i in pdfPages"
                    :key="i"
                    :page="i"
                    style="width:100%;"/>
            </div>
            <template v-else-if="previewImage.indexOf('mp4') >= 0">
                <video ref="video" width="100%" controls autoplay>
                    <source :src="previewImage" type="video/mp4" />
                </video>
            </template>
            <img v-else style="width: 100%" :src="previewImage" />
        </a-modal>
    </a-spin>
</template>
<script>
import {uploadFile} from '@/api/upload'
import pdf from 'vue-pdf';
export default{
    name:'UploadPicture',
    components:{
        pdf
    },
    props:{
        max:{
            type:Number,
            default:6
        },
        list:{
            type:Array,
            default:()=>[]
        },
        disabled:{
            type:Boolean,
            default:false
        }
    },
    data(){
        return{
            previewImage:'',
            previewVisible:false,
            loading:false,
            uploadCount:0,
            doneCount:0,
            pdfPages:null,
        }
    },
    computed:{
        fileList(){
            let list = this.list;
            let fileList = []
            if(list && list.length){
                list.map((item,i)=>{
                    fileList.push({
                        uid:i,
                        status:'done',
                        name:i+'.png',
                        url:item
                    })
                })
            }
            return fileList;
        }
    },
    methods:{
        // 重写a-upload的文件上传处理方式
        async downloadFilesCustomRequest(data){
            this.loading = true;
            this.uploadCount++;
            await this.saveFile(data)
        },
        // 上传并保存文件
        async saveFile(data){
            try{
                const formData = new FormData()  
                formData.append('file', data.file)  
                let res = await uploadFile(formData);
                this.doneCount++;
                let {data:imgUrl} = res;
                if(this.list.length<this.max){
                    this.$emit('upload',imgUrl)
                }
                if(this.uploadCount==this.doneCount){
                    this.loading = false;
                    this.doneCount = 0;
                    this.uploadCount = 0;
                }
            }finally{
                this.loading = false;
                this.doneCount = 0;
                this.uploadCount = 0;
            }
        },
        //删除文件
        async removeFile(file){
            let {uid} = file;
            this.$emit('delete',uid)
        },
        handleCancel(){
            this.previewVisible = false;
        },
        async handlePreview(file){
            console.log(file)
            this.previewImage = file.url;
            if(this.previewImage.indexOf('.pdf')>0){
                this.getPdfPages(this.previewImage)
            }
            this.previewVisible = true;
        },
        //获取pdf页数
        getPdfPages(url){
            let loadingTask = pdf.createLoadingTask(url);
            loadingTask.promise.then(res=>{
                this.pdfPages = res.numPages;
            }).catch(err=>{
                console.log('加载失败：'+err)
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.tip{
    margin: -10px auto 10px;
    font-size: 12px;
    line-height: 1;
    color: #999;
}
</style>
